WebGL klasterizuotas atidėtasis apšvietimas: pažangus apšvietimo valdymas

Realaus laiko 3D grafikos srityje apšvietimas atlieka esminį vaidmenį kuriant realistiškas ir vizualiai patrauklias scenas. Nors tradiciniai tiesioginio vaizdavimo metodai gali tapti skaičiavimo požiūriu brangūs esant dideliam šviesos šaltinių skaičiui, atidėtasis vaizdavimas siūlo patrauklią alternatyvą. Klasterizuotas atidėtasis apšvietimas tai pakelia į dar aukštesnį lygį, suteikdamas efektyvų ir mastelio keitimui pritaikytą sprendimą sudėtingiems apšvietimo scenarijams valdyti WebGL programose.

Atidėtojo vaizdavimo supratimas

Prieš gilinantis į klasterizuotą atidėtąjį apšvietimą, svarbu suprasti pagrindinius atidėtojo vaizdavimo principus. Skirtingai nuo tiesioginio vaizdavimo, kuris apskaičiuoja apšvietimą kiekvienam fragmentui (pikseliui) jį rasterizuojant, atidėtasis vaizdavimas atskiria geometrijos ir apšvietimo etapus. Štai kaip tai veikia:

1. Geometrijos etapas (G-buferio kūrimas): Pirmajame etape scenos geometrija yra vaizduojama į kelis vaizdavimo taikinius, bendrai vadinamus G-buferiu. Šiame buferyje paprastai saugoma tokia informacija kaip:
   • Gylis: Atstumas nuo kameros iki paviršiaus.
   • Normalės: Paviršiaus orientacija.
   • Albedas: Pagrindinė paviršiaus spalva.
   • Blizgesys: Blizgaus atspindžio spalva ir intensyvumas.
2. Apšvietimo etapas: Antrajame etape G-buferis naudojamas apšvietimo indėliui apskaičiuoti kiekvienam pikseliui. Tai leidžia mums atidėti brangius apšvietimo skaičiavimus, kol turėsime visą reikiamą paviršiaus informaciją.

Atidėtasis vaizdavimas suteikia keletą privalumų:

• Sumažintas perteklinis piešimas (overdraw): Apšvietimo skaičiavimai atliekami tik vieną kartą kiekvienam pikseliui, nepriklausomai nuo jį veikiančių šviesos šaltinių skaičiaus.
• Supaprastinti apšvietimo skaičiavimai: Visa reikiama paviršiaus informacija yra lengvai pasiekiama G-bufere, supaprastinant apšvietimo lygtis.
• Atskirta geometrija ir apšvietimas: Tai leidžia kurti lankstesnius ir moduliškesnius vaizdavimo konvejerius.

Tačiau standartinis atidėtasis vaizdavimas vis dar gali susidurti su iššūkiais, kai naudojamas labai didelis šviesos šaltinių skaičius. Būtent čia į pagalbą ateina klasterizuotas atidėtasis apšvietimas.

Pristatome klasterizuotą atidėtąjį apšvietimą

Klasterizuotas atidėtasis apšvietimas yra optimizavimo technika, kuria siekiama pagerinti atidėtojo vaizdavimo našumą, ypač scenose su daugybe šviesos šaltinių. Pagrindinė idėja yra padalinti matymo nupjautinę piramidę (view frustum) į 3D klasterių tinklelį ir priskirti šviesos šaltinius šiems klasteriams pagal jų erdvinę vietą. Tai leidžia mums efektyviai nustatyti, kurie šviesos šaltiniai veikia kuriuos pikselius apšvietimo etapo metu.

Kaip veikia klasterizuotas atidėtasis apšvietimas

1. Matymo nupjautinės piramidės padalijimas: Matymo nupjautinė piramidė padalijama į 3D klasterių tinklelį. Šio tinklelio matmenys (pvz., 16x9x16) lemia klasterizavimo detalumą.
2. Šviesos šaltinių priskyrimas: Kiekvienas šviesos šaltinis priskiriamas klasteriams, su kuriais jis kertasi. Tai galima padaryti patikrinus šviesos šaltinio apibrėžiantįjį tūrį (bounding volume) su klasterių ribomis.
3. Klasterių šviesos šaltinių sąrašo kūrimas: Kiekvienam klasteriui sukuriamas jį veikiančių šviesos šaltinių sąrašas. Šis sąrašas gali būti saugomas buferyje arba tekstūroje.
4. Apšvietimo etapas: Apšvietimo etapo metu kiekvienam pikseliui nustatome, kuriam klasteriui jis priklauso, ir tada iteruojame per to klasterio šviesos šaltinių sąraše esančius šaltinius. Tai žymiai sumažina šviesos šaltinių, kuriuos reikia įvertinti kiekvienam pikseliui, skaičių.

Klasterizuoto atidėtojo apšvietimo privalumai

• Pagerintas našumas: Sumažinus vienam pikseliui tenkančių šviesos šaltinių skaičių, klasterizuotas atidėtasis apšvietimas gali žymiai pagerinti vaizdavimo našumą, ypač scenose su dideliu šviesos šaltinių skaičiumi.
• Mastelio keitimo galimybė: Našumo padidėjimas tampa ryškesnis didėjant šviesos šaltinių skaičiui, todėl tai yra mastelio keitimui pritaikytas sprendimas sudėtingiems apšvietimo scenarijams.
• Sumažintas perteklinis piešimas (overdraw): Panašiai kaip ir standartinis atidėtasis vaizdavimas, klasterizuotas atidėtasis apšvietimas sumažina perteklinį piešimą, atliekant apšvietimo skaičiavimus tik vieną kartą kiekvienam pikseliui.

Klasterizuoto atidėtojo apšvietimo įgyvendinimas WebGL

Klasterizuoto atidėtojo apšvietimo įgyvendinimas WebGL apima kelis žingsnius. Štai bendra proceso apžvalga:

1. G-buferio kūrimas: Sukurkite G-buferio tekstūras, kad išsaugotumėte reikiamą paviršiaus informaciją (gylį, normalės, albedą, blizgesį). Paprastai tam naudojami keli vaizdavimo taikiniai (MRT).
2. Klasterių generavimas: Apibrėžkite klasterių tinklelį ir apskaičiuokite klasterių ribas. Tai galima padaryti JavaScript arba tiesiogiai šešėliavimo programoje.
3. Šviesos šaltinių priskyrimas (CPU pusėje): Iteruokite per šviesos šaltinius ir priskirkite juos atitinkamiems klasteriams. Tai paprastai atliekama CPU, nes tai reikia apskaičiuoti tik tada, kai šviesos šaltiniai juda ar keičiasi. Apsvarstykite erdvinio greitinimo struktūros (pvz., apibrėžiančiųjų tūrių hierarchijos ar tinklelio) naudojimą, kad pagreitintumėte šviesos šaltinių priskyrimo procesą, ypač esant dideliam jų skaičiui.
4. Klasterių šviesos šaltinių sąrašo kūrimas (GPU pusėje): Sukurkite buferį ar tekstūrą, kurioje bus saugomi kiekvieno klasterio šviesos šaltinių sąrašai. Perkelkite kiekvienam klasteriui priskirtų šviesos šaltinių indeksus iš CPU į GPU. Tai galima pasiekti naudojant tekstūros buferio objektą (TBO) arba saugyklos buferio objektą (SBO), priklausomai nuo WebGL versijos ir galimų plėtinių.
5. Apšvietimo etapas (GPU pusėje): Įgyvendinkite apšvietimo etapo šešėliavimo programą, kuri nuskaito duomenis iš G-buferio, nustato kiekvieno pikselio klasterį ir iteruoja per klasterio šviesos šaltinių sąrašą, kad apskaičiuotų galutinę spalvą.

Kodo pavyzdžiai (GLSL)

Štai keletas kodo fragmentų, iliustruojančių pagrindines įgyvendinimo dalis. Atkreipkite dėmesį: tai supaprastinti pavyzdžiai ir gali prireikti korekcijų pagal jūsų konkrečius poreikius.

G-buferio fragmentų šešėliavimo programa

#version 300 es

in vec3 vNormal;
in vec2 vTexCoord;

layout (location = 0) out vec4 outAlbedo;
layout (location = 1) out vec4 outNormal;
layout (location = 2) out vec4 outSpecular;

uniform sampler2D uTexture;

void main() {
  outAlbedo = texture(uTexture, vTexCoord);
  outNormal = vec4(normalize(vNormal), 0.0);
  outSpecular = vec4(0.5, 0.5, 0.5, 32.0); // Pavyzdinė blizgesio spalva ir blizgumo lygis
}

Apšvietimo etapo fragmentų šešėliavimo programa

#version 300 es

in vec2 vTexCoord;

layout (location = 0) out vec4 outColor;

uniform sampler2D uAlbedo;
uniform sampler2D uNormal;
uniform sampler2D uSpecular;
uniform sampler2D uDepth;

uniform samplerBuffer uLightListBuffer;
uniform vec3 uLightPositions[MAX_LIGHTS];
uniform vec3 uLightColors[MAX_LIGHTS];

uniform int uClusterGridSizeX;
uniform int uClusterGridSizeY;
uniform int uClusterGridSizeZ;

uniform mat4 uInverseProjectionMatrix;

#define MAX_LIGHTS 256 //Pavyzdys, turi būti apibrėžtas ir nuoseklus

// Funkcija pasaulio pozicijai atkurti iš gylio ir ekrano koordinačių
vec3 reconstructWorldPosition(float depth, vec2 screenCoord) {
    vec4 clipSpacePosition = vec4(screenCoord * 2.0 - 1.0, depth, 1.0);
    vec4 viewSpacePosition = uInverseProjectionMatrix * clipSpacePosition;
    return viewSpacePosition.xyz / viewSpacePosition.w;
}

// Funkcija klasterio indeksui apskaičiuoti pagal pasaulio poziciją
int calculateClusterIndex(vec3 worldPosition) {
    // Transformuoti pasaulio poziciją į matymo erdvę
    vec4 viewSpacePosition = uInverseViewMatrix * vec4(worldPosition, 1.0);

    // Apskaičiuoti normalizuotas įrenginio koordinates (NDC)
    vec3 ndcPosition = viewSpacePosition.xyz / viewSpacePosition.w; //Perspektyvinis dalijimas

    //Transformuoti į [0, 1] intervalą
    vec3 normalizedPosition = ndcPosition * 0.5 + 0.5;

    // Apriboti, kad išvengtumėte kreipimosi už ribų
    normalizedPosition = clamp(normalizedPosition, vec3(0.0), vec3(1.0));

    // Apskaičiuoti klasterio indeksą
    int clusterX = int(normalizedPosition.x * float(uClusterGridSizeX));
    int clusterY = int(normalizedPosition.y * float(uClusterGridSizeY));
    int clusterZ = int(normalizedPosition.z * float(uClusterGridSizeZ));

    // Apskaičiuoti 1D indeksą
    return clusterX + clusterY * uClusterGridSizeX + clusterZ * uClusterGridSizeX * uClusterGridSizeY;
}


void main() {
  float depth = texture(uDepth, vTexCoord).r;
  vec3 normal = normalize(texture(uNormal, vTexCoord).xyz);
  vec3 albedo = texture(uAlbedo, vTexCoord).rgb;
  vec4 specularData = texture(uSpecular, vTexCoord);
  float shininess = specularData.a;
  float specularIntensity = 0.5; // Supaprastintas blizgesio intensyvumas


  // Atkurti pasaulio poziciją iš gylio
  vec3 worldPosition = reconstructWorldPosition(depth, vTexCoord);

  // Apskaičiuoti klasterio indeksą
  int clusterIndex = calculateClusterIndex(worldPosition);

  // Nustatyti šviesos šaltinių sąrašo pradžios ir pabaigos indeksus šiam klasteriui
    int lightListOffset = clusterIndex * 2; // Darant prielaidą, kad kiekvienas klasteris saugo pradžios ir pabaigos indeksus
    int startLightIndex = int(texelFetch(uLightListBuffer, lightListOffset).r * float(MAX_LIGHTS)); //Normalizuoti šviesos indeksus į [0, MAX_LIGHTS]
    int numLightsInCluster = int(texelFetch(uLightListBuffer, lightListOffset + 1).r * float(MAX_LIGHTS));


  // Sukaupti apšvietimo indėlius
  vec3 finalColor = vec3(0.0);
  for (int i = 0; i < numLightsInCluster; ++i) {
        int lightIndex = startLightIndex + i;
        if (lightIndex >= MAX_LIGHTS) break; // Saugumo patikrinimas, siekiant išvengti kreipimosi už ribų

        vec3 lightPosition = uLightPositions[lightIndex];
        vec3 lightColor = uLightColors[lightIndex];

        vec3 lightDirection = normalize(lightPosition - worldPosition);
        float distanceToLight = length(lightPosition - worldPosition);

        //Paprastas difuzinis apšvietimas
        float diffuseIntensity = max(dot(normal, lightDirection), 0.0);
        vec3 diffuse = diffuseIntensity * lightColor * albedo;

        //Paprastas blizgusis apšvietimas
        vec3 reflectionDirection = reflect(-lightDirection, normal);
        float specularHighlight = pow(max(dot(reflectionDirection, normalize(-worldPosition)), 0.0), shininess);
        vec3 specular = specularIntensity * specularHighlight * specularData.rgb * lightColor;

        float attenuation = 1.0 / (distanceToLight * distanceToLight); // Paprastas slopinimas


        finalColor += (diffuse + specular) * attenuation;
  }

  outColor = vec4(finalColor, 1.0);
}

Svarbūs aspektai

• Klasterio dydis: Klasterio dydžio pasirinkimas yra labai svarbus. Mažesni klasteriai užtikrina geresnį atmetimą (culling), tačiau padidina klasterių skaičių ir klasterių šviesos šaltinių sąrašų valdymo pridėtines išlaidas. Didesni klasteriai sumažina pridėtines išlaidas, bet dėl to gali būti vertinama daugiau šviesos šaltinių vienam pikseliui. Eksperimentavimas yra raktas į optimalaus klasterio dydžio suradimą jūsų scenai.
• Šviesos šaltinių priskyrimo optimizavimas: Šviesos šaltinių priskyrimo proceso optimizavimas yra būtinas našumui. Erdvinės duomenų struktūros (pvz., apibrėžiančiųjų tūrių hierarchija ar tinklelis) gali žymiai paspartinti procesą, nustatant, su kuriais klasteriais šviesos šaltinis kertasi.
• Atminties pralaidumas: Būkite atidūs atminties pralaidumui, kai kreipiatės į G-buferį ir klasterių šviesos šaltinių sąrašus. Tinkamų tekstūrų formatų ir glaudinimo metodų naudojimas gali padėti sumažinti atminties naudojimą.
• WebGL apribojimai: Senesnėse WebGL versijose gali trūkti tam tikrų funkcijų (pvz., saugyklos buferio objektų). Apsvarstykite plėtinių ar alternatyvių metodų naudojimą šviesos šaltinių sąrašams saugoti. Įsitikinkite, kad jūsų įgyvendinimas yra suderinamas su tiksline WebGL versija.
• Našumas mobiliuosiuose įrenginiuose: Klasterizuotas atidėtasis apšvietimas gali būti skaičiavimo požiūriu intensyvus, ypač mobiliuosiuose įrenginiuose. Atidžiai profiliuokite savo kodą ir optimizuokite našumą. Apsvarstykite mažesnių raiškų ar supaprastintų apšvietimo modelių naudojimą mobiliuosiuose įrenginiuose.

Optimizavimo technikos

Galima pritaikyti keletą technikų, siekiant toliau optimizuoti klasterizuotą atidėtąjį apšvietimą WebGL:

• Matymo nupjautinės piramidės atmetimas (Frustum Culling): Prieš priskirdami šviesos šaltinius klasteriams, atlikite atmetimą pagal matymo nupjautinę piramidę, kad atmestumėte šviesos šaltinius, kurie yra visiškai už matymo srities ribų.
• Nematomų pusių atmetimas (Backface Culling): Atmeskite į galą atsuktas trikampių puses geometrijos etapo metu, kad sumažintumėte į G-buferį įrašomų duomenų kiekį.
• Detalumo lygis (LOD): Naudokite skirtingus savo modelių detalumo lygius, atsižvelgiant į jų atstumą nuo kameros. Tai gali žymiai sumažinti vaizduojamos geometrijos kiekį.
• Tekstūrų glaudinimas: Naudokite tekstūrų glaudinimo technikas (pvz., ASTC), kad sumažintumėte tekstūrų dydį ir pagerintumėte atminties pralaidumą.
• Šešėliavimo programų optimizavimas: Optimizuokite savo šešėliavimo programų kodą, kad sumažintumėte instrukcijų skaičių ir pagerintumėte našumą. Tai apima tokias technikas kaip ciklų išskleidimas, instrukcijų planavimas ir šakojimosi minimizavimas.
• Iš anksto apskaičiuotas apšvietimas: Apsvarstykite iš anksto apskaičiuoto apšvietimo technikų (pvz., šviesos žemėlapių ar sferinių harmonikų) naudojimą statiniams objektams, kad sumažintumėte realaus laiko apšvietimo skaičiavimus.
• Techninės įrangos egzempliorių kūrimas (Hardware Instancing): Jei turite kelis to paties objekto egzempliorius, naudokite techninės įrangos egzempliorių kūrimą, kad juos vaizduotumėte efektyviau.

Alternatyvos ir kompromisai

Nors klasterizuotas atidėtasis apšvietimas suteikia didelių privalumų, svarbu apsvarstyti alternatyvas ir jų atitinkamus kompromisus:

• Tiesioginis vaizdavimas (Forward Rendering): Nors mažiau efektyvus su daugeliu šviesos šaltinių, tiesioginis vaizdavimas gali būti paprasčiau įgyvendinamas ir tinkamas scenoms su ribotu šviesos šaltinių skaičiumi. Jis taip pat lengviau leidžia dirbti su skaidrumu.
• Tiesioginis+ vaizdavimas (Forward+ Rendering): Tiesioginis+ vaizdavimas yra atidėtojo vaizdavimo alternatyva, kuri naudoja skaičiavimo šešėliavimo programas (compute shaders) šviesos šaltinių atmetimui atlikti prieš tiesioginio vaizdavimo etapą. Tai gali pasiūlyti panašius našumo privalumus kaip ir klasterizuotas atidėtasis apšvietimas. Jį gali būti sudėtingiau įgyvendinti ir gali prireikti specifinių techninės įrangos funkcijų.
• Langeliais pagrįstas atidėtasis apšvietimas (Tiled Deferred Lighting): Langeliais pagrįstas atidėtasis apšvietimas padalija ekraną į 2D langelius, o ne į 3D klasterius. Tai gali būti paprasčiau įgyvendinti nei klasterizuotą atidėtąjį apšvietimą, tačiau gali būti mažiau efektyvu scenose su dideliu gylio kitimu.

Vaizdavimo technikos pasirinkimas priklauso nuo konkrečių jūsų programos reikalavimų. Priimdami sprendimą, atsižvelkite į šviesos šaltinių skaičių, scenos sudėtingumą ir tikslinę techninę įrangą.

Išvada

WebGL klasterizuotas atidėtasis apšvietimas yra galinga technika sudėtingiems apšvietimo scenarijams valdyti internetinėse grafikos programose. Efektyviai atmesdamas šviesos šaltinius ir sumažindamas perteklinį piešimą, jis gali žymiai pagerinti vaizdavimo našumą ir mastelio keitimo galimybes. Nors įgyvendinimas gali būti sudėtingas, našumo ir vizualinės kokybės privalumai daro jį vertingu pasirinkimu reiklioms programoms, tokioms kaip žaidimai, simuliacijos ir vizualizacijos. Kruopštus klasterių dydžio, šviesos šaltinių priskyrimo optimizavimo ir atminties pralaidumo apsvarstymas yra būtinas norint pasiekti optimalius rezultatus.

WebGL toliau tobulėjant ir techninės įrangos galimybėms gerėjant, klasterizuotas atidėtasis apšvietimas tikriausiai taps vis svarbesniu įrankiu kūrėjams, siekiantiems sukurti vizualiai stulbinančias ir našias internetines 3D patirtis.

Papildomi ištekliai

• WebGL specifikacija: https://www.khronos.org/webgl/
• OpenGL Insights: Knyga su skyriais apie pažangias vaizdavimo technikas, įskaitant atidėtąjį vaizdavimą ir klasterizuotą šešėliavimą.
• Moksliniai straipsniai: Ieškokite akademinių straipsnių apie klasterizuotą atidėtąjį apšvietimą ir susijusias temas „Google Scholar“ ar panašiose duomenų bazėse.